<template>
  <div class="center-chart-1">
    <div class="top">
      <span>当前生产工单</span>
      <el-select
        v-model="current"
        style="width: 55%"
        @change="handleCurrentChange"
      >
        <el-option
          v-for="item in orderList"
          :key="item.id"
          :value="item.id"
          :label="item.itemName"
        ></el-option>
      </el-select>
      <span
        :class="{
          green:
            currentListItem.currentLineSpeed == currentListItem.ratedLineSpeed,
          'line-speed': true,
        }"
      >
        {{ currentListItem.currentLineSpeed }}bph
        <i
          v-if="
            currentListItem.currentLineSpeed > currentListItem.ratedLineSpeed
          "
          class="el-icon-top"
        ></i>
        <i
          v-if="
            currentListItem.currentLineSpeed < currentListItem.ratedLineSpeed
          "
          class="el-icon-bottom"
        ></i>
      </span>
    </div>

    <el-carousel
      v-if="!!orderList.length"
      ref="Carousel"
      trigger="click"
      height="100%"
      indicator-position="none"
      :interval="10000"
      :autoplay="false"
      @change="handleCarouselChange"
    >
      <el-carousel-item
        v-for="(item, itemIndex) in orderList"
        :key="item.id"
        :name="item.id"
      >
        <div v-if="!!list[itemIndex]" class="process-contain">
          <div class="process-centent">
            <span>工单生产效率</span>
            <div class="process">
              <div
                :style="{
                  width: list[itemIndex].produceEfficiency + '%',
                }"
                class="process-inner"
              ></div>
            </div>
            <span
              :class="{
                'produce-efficiency': true,
                green: list[itemIndex].produceEfficiency >= 95,
                red: list[itemIndex].produceEfficiency <= 90,
              }"
              >{{ list[itemIndex].produceEfficiency }}%</span
            >
          </div>
          <div class="process-centent">
            <span>班组工作时长</span>
            <div class="process">
              <div
                :style="{
                  width: (list[itemIndex].groupWorkHours / 12) * 100 + '%',
                }"
                class="process-inner"
              ></div>
            </div>
            <span>
              {{ list[itemIndex].groupWorkHours + "小时" }}
            </span>
          </div>
          <div class="process-centent">
            <span>工单计划完成率</span>
            <div class="process">
              <div
                :style="{
                  width: list[itemIndex].completeRate + '%',
                }"
                class="process-inner"
              ></div>
            </div>
            <span>{{ list[itemIndex].completeRate }}%</span>
          </div>
          <div class="bottom">
            <div class="bottom-item">
              <svg-icon class-name="kanban-icon" icon-class="kanbanIcon1" />
              <span>计划产量</span>
              <span>
                {{ list[itemIndex].planQuantity || 0 }}
                标准箱
              </span>
            </div>
            <div class="bottom-item">
              <svg-icon class-name="kanban-icon" icon-class="kanbanIcon2" />
              <span>完工产量</span>
              <span>
                {{ list[itemIndex].completeQuantity || 0 }}
                标准箱
              </span>
            </div>
          </div>
        </div>
        <div v-else class="no-data"></div>
      </el-carousel-item>
    </el-carousel>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import { getListOrderByProduceId, getLineProduceInfo } from "@/api/dashboard/blowIrriagtionSpinLine";
export default {
  name: "WaterLevelChart",
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      current: "",
      orderList: [],
      list: [],
    };
  },
  computed: {
    currentListItem() {
      if (!this.current) {
        return {};
      }
      const index = this.orderList.findIndex((o) => o.id == this.current);
      const list = this.list;
      return {
        currentLineSpeed: list[index]?.currentLineSpeed || 0,
        ratedLineSpeed: list[index]?.ratedLineSpeed || 0,
      };
    },
  },
  created() {
    this.getListOrder();
  },
  methods: {
    // 查询未关闭的工单
    getListOrder() {
      if (!this.groupItem) {
        return;
      }
      const param = {
        produceId: this.groupItem.id,
      };
      getListOrderByProduceId(param)
        .then((res) => {
          if (res?.data?.length) {
            this.orderList = res?.data;
            this.current = this.orderList[0].id;
          } else {
            this.orderList = [];
            this.current = "";
          }
        })
        .catch(() => {
          this.orderList = [];
          this.current = "";
        })
        .finally(() => {
          // 重置为第一页
          this.$nextTick(() => {
            if (this.$refs.Carousel) {
              this.$refs.Carousel.setActiveItem(0);
              this.list = new Array(this.orderList.length);
              this.getLineProduceInfo();
            }
          });
        });
    },
    // 查询产线生产情况
    getLineProduceInfo() {
      const orderIndex = this.orderList.findIndex(
        (ele) => ele.id == this.current
      );
      if (orderIndex == -1) {
        return;
      }
      // 已有数据，不再请求
      if (this.list[orderIndex]) {
        return;
      }
      const param = {
        orderId: this.current,
      };
      getLineProduceInfo(param).then((res) => {
        let data = res?.data || {};
        // 工单生产效率，保留两位小数
        data.produceEfficiency = data.produceEfficiency
          ? this.toFix(data.produceEfficiency * 100, 2)
          : 0;
        // 班组工作时长保留两位小数，保留两位小数
        data.groupWorkHours = data.groupWorkHours
          ? this.toFix(data.groupWorkHours, 2)
          : 0;
        // 工单计划完成率，保留两位小数
        data.completeRate = data.completeRate
          ? this.toFix(data.completeRate * 100, 2)
          : 0;
        this.$set(this.list, orderIndex, data);
      });
    },
    // 轮播图切换
    handleCarouselChange(index) {
      this.current = this.orderList[index].id;
      this.getLineProduceInfo();
    },
    // 当前工单切换
    handleCurrentChange(value) {
      if (this.$refs.Carousel) {
        const index = this.orderList.findIndex((ele) => ele.id == value);
        this.$refs.Carousel.setActiveItem(index);
      }
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getListOrder();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.center-chart-1 {
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  .top {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .line-speed {
    font-weight: 600;
    color: #ee6666;
    i {
      font-weight: 600;
    }
    &.green {
      color: #a2ff74;
    }
  }
  .el-carousel {
    flex: 1;
  }
  .process-contain {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &::before {
      content: "";
      flex: 1;
    }
  }
  .process-centent {
    flex: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > span:first-child {
      flex: 5;
    }
    & > span:last-child {
      flex: 4;
      text-align: center;
    }
    .process {
      flex: 10;
      height: 45%;
      max-height: 22px;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      background: #ffffff6e;
      &-inner {
        height: 100%;
        background: #a2ff74;
      }
    }
    .produce-efficiency {
      color: rgb(250, 200, 88);
      &.green{
        color: #a2ff74;
      }
      &.red{
        color: #ee6666;
      }
    }
  }
  .bottom {
    flex: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      &:first-child {
        color: #27bbff;
      }
      &:last-child {
        color: #74d047;
      }
      span:last-child {
        margin-left: 20px;
      }
    }
  }
}
::v-deep .el-input.el-input--suffix {
  // 2.修改背景颜色、字体颜色、边框、宽高
  .el-input__inner {
    background: #010d50 !important;
    // border: 1px solid #010d50;
    border: 1px solid #fff;
    color: #fff;
    height: 30px;
  }

  // 符号的位置会错乱，进行修正（水平）
  .el-input__suffix-inner {
    position: absolute;
    left: -25px;
  }

  // 符号的位置会错乱，进行修正（垂直）
  .el-select__caret.el-input__icon.el-icon-arrow-up {
    line-height: 30px;
  }

  .el-input__inner::placeholder {
    color: #fff;
  }

  .el-icon-arrow-up:before {
    color: #fff;
  }
}
.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
::v-deep .el-carousel__item.is-animating {
  transition-duration: 1s;
}
.kanban-icon {
  font-size: 22px;
  margin-right: 5px;
}

::v-deep {
  .el-input--medium {
    font-size: 14px;
  }
  .el-input--medium .el-input__inner {
    line-height: 36px;
    padding-right: 30px;
  }
  .el-input__suffix {
    right: 5px;
  }
  .el-input--medium .el-input__icon {
    line-height: 36px;
  }
  .el-select .el-input .el-select__caret {
    font-size: 14px;
  }
}
</style>
